<script lang="ts" setup>
import { ref, computed, watchEffect } from "vue";

let year = new Date().getFullYear();

const month = ref(new Date().getMonth() + 1);

function getMonthDates(year: number, month: number) {
  var startDate = new Date(year, month, 1); // 设置开始日期为该月的一号
  var endDate = new Date(year, month, 0); // 设置结束日期为该月的最后一天

  var dates = [];
  for (var i = startDate.getDate(); i <= endDate.getDate(); i++) {
    var date = new Date(year, month - 1, i).getDate();
    dates.push({ month, date });
  }

  return dates;
}

// 补全数组
function completeArray(arr: number[]) {
  let sortedArr = arr.sort((a, b) => a - b); // 将数组排序
  let start = sortedArr[0]; // 获取数组的起始数字
  let end = sortedArr[1]; // 获取数组的结束数字

  let completeArr = [];
  for (let i = start; i <= end; i++) {
    completeArr.push(i); // 将范围内的数字推入数组
  }

  return completeArr;
}

const nowDay = new Date().getDate();
const dates = computed(() => getMonthDates(year, +month.value)); //获取当前月份的日期

// 开始 和 结束的日期
const startEnd = ref<number[]>([nowDay, nowDay + 1]);

// 选中的区间
const selected = computed(() => completeArray(startEnd.value));

const startEndList = ref<any>([]);
const datesValue = computed(() => {
  const arr = startEndList.value.sort(
    (a: { date: number }, b: { date: number }) => a.date - b.date
  );
  const month = arr[0]?.month;
  const startDay = arr[0]?.date;
  const endDay = arr[1]?.date;
  return endDay && `${month}月${startDay}日 - ${month}月${endDay}日`;
});
const itemClick = (item: any, index: number) => {
  if (!item.date) {
    return;
  }
  if (startEnd.value.length >= 2) {
    startEnd.value = [];
    startEndList.value = [];
  }
  startEnd.value.push(item.date);
  startEndList.value.push(item);
};

function getFirstDayOfMonth(year: number, month: number) {
  var firstDay = new Date(year, month - 1, 1).getDay();
  return firstDay;
}
const weekList = ["一", "二", "三", "四", "五", "六", "日"];

const index = computed(() => {
  const weekObj: any = {
    "0": "日",
    "1": "一",
    "2": "二",
    "3": "三",
    "4": "四",
    "5": "五",
    "6": "六",
  };
  return weekList.findIndex(
    (item) => item == weekObj[getFirstDayOfMonth(year, +month.value)]
  );
});

const marLeft = computed(() => `calc((100% / 7) * ${index.value})`);
</script>

<template>
  <div class="center" style="flex-direction: column">
    <div class="flex items-center p-10px w-500px flex-wrap pb-0 week-list">
      <div class="item" v-for="(week, index) in weekList" :key="index">
        {{ week }}
      </div>
    </div>
    <div class="flex items-center p-10px w-500px flex-wrap pt-0">
      <div
        @click="itemClick(item, index)"
        :class="{
          active: selected.includes(item.date),
          side: startEnd.includes(item.date),
          'start-item': startEnd[0] == item.date,
          'end-item': startEnd[0] !== item.date,
        }"
        class="item btn cursor-pointer"
        style="box-shadow: 0px 0px 2px 0 #e5e5e5"
        v-for="(item, index) in dates"
        :key="index"
      >
        <div class="height-full center" style="flex-direction: column">
          <span>
            {{ item.date }}
          </span>
          <span class="text-12px" v-if="startEnd.includes(item.date)">{{
            startEnd[0] == item.date ? "开始" : "结束"
          }}</span>
        </div>
      </div>
    </div>

    <div>选择日期：{{ datesValue }}</div>
    <div class="flex gap-10px">
      <div>月份</div>
      <select name="" id="" v-model="month">
        <option v-for="i in 12" :key="i">{{ i }}</option>
      </select>
    </div>
  </div>
</template>

<style lang="less" scoped>
.week-list {
  box-shadow: 0px 5px 10px 0 #e5e5e5;
}
.item {
  //   padding: 16px;
  width: calc(100% / 7);
  height: 68px;

  display: flex;
  justify-content: center;
  align-items: center;
}
.btn {
  &:first-child {
    margin-left: v-bind(marLeft);
  }
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.active {
  background: #fde6e9;
  color: #f46374;
}

.side {
  background: #ee0a24;
  color: #fff;
}
.start-item {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.end-item {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
</style>
